<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<!--

    This file is part of Blue Violin.

    Blue Violin is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Blue Violin is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero Public License for more details.

    You should have received a copy of the GNU Affero Public License
    along with Blue Violin.  If not, see <http://www.gnu.org/licenses/>.

    Blue Violin  Copyright (C) 2008  Blue Violin, Inc. & Josh Watts <josh.watts@blueviolin.org>
	For more information, visit http://www.blueviolin.org/

    This program comes with ABSOLUTELY NO WARRANTY.


-->

<html> 
 
<head> 
    <meta http-equiv="Content-Script-Type" content="text/javascript"/> 
    <title>Using Scriptaculous</title> 
	<script src="scripts/general.js"></script>
    <script src="scripts/scriptaculous/prototype.js" ></script> 
    <script src="scripts/scriptaculous/scriptaculous.js"></script> 
		<link rel="stylesheet" href="css/app.css" type="text/css"/>	
 
</head> 
<body style="padding: 5px;">

	<div id="divScript1" style="background-image: url(./images/backgrounds/script_block.gif); width: 100px; color: white; text-align: center; cursor: default; margin-bottom: 5px;" class="dragscript">
		<? include "topround.php"; ?>
		
		<div style="height: 30px;">
			Script 1
		</div>
		<? include "bottomround.php"; ?>
	</div>


	<div id="divLightTable" style="height: 300px; width: 90%; border: 2px solid black; margin: 5px;">

	</div>

	<div id="divOperator1" style="background-color: gray; color: white; height: 20px; width: 75px; cursor: default; text-align: center;" class="dragoperator">
		Operator
	</div>



	<div id="divMessage">
		
	</div>


<script type="text/javascript"> 

function LightTable()
{
	this.m_oDraggables = {};
	this.m_oObjects = [];
	this.m_aLines = [];
	this.m_oElement = $get("divLightTable");
	this.m_oHoverElement = null;
	this.m_oHoverOperator = null;
	this.m_oGridSpacing = new Point(200, 100);
	this.m_oTolerance = new Point(30, 30);
	this.m_oActive = null;

	this.m_oHoverElement = $create("DIV");
	this.m_oHoverElement.id = "divHover";
	this.m_oHoverElement.style.position = "absolute";
	this.m_oHoverElement.style.top = "5px";
	this.m_oHoverElement.style.left = "5px";
	this.m_oHoverElement.style.height = "40px";
	this.m_oHoverElement.style.width = "100px";
	this.m_oHoverElement.style.border = "2px dotted red";
	this.m_oHoverElement.style.visibility = "hidden";
	this.m_oElement.appendChild(this.m_oHoverElement);

	this.m_oHoverOperator = $create("DIV");
	this.m_oHoverOperator.id = "divHover";
	this.m_oHoverOperator.style.position = "absolute";
	this.m_oHoverOperator.style.top = "5px";
	this.m_oHoverOperator.style.left = "5px";
	this.m_oHoverOperator.style.height = "20px";
	this.m_oHoverOperator.style.width = "75px";
	this.m_oHoverOperator.style.border = "2px dotted red";
	this.m_oHoverOperator.style.visibility = "hidden";
	this.m_oElement.appendChild(this.m_oHoverOperator );

}


LightTable.prototype =
{
	addDraggable : function(sID, oDraggable)
	{
		this.m_oDraggables[sID] = oDraggable;

	},

	copy : function(oTarget)
	{
		var i = 0;
		var bNewObject = null;
		var oNewObject = null;
		var nLength = this.m_oObjects.length;

		for (i = 0;
			 i < nLength;
			 ++i)
		{
			if (oTarget === this.m_oObjects[i])
			{
				bNewObject = false;
			}
		}
		if (null == bNewObject)
		{
			bNewObject = true;
		}



		if (true == bNewObject)
		{
			if (null != this.m_oDraggables[oTarget.id])
			{
				this.m_oDraggables[oTarget.id].destroy();
			
			}

			oNewObject = oTarget.cloneNode(true);
			oNewObject.id = "Script_" + this.m_oObjects.length;
			oNewObject.style.position = "absolute";

			oNewObject.style.top = this.m_oHoverElement.style.top;
			oNewObject.style.left = this.m_oHoverElement.style.left;
			oNewObject.style.margin = "0px";



			this.m_oObjects.push(oNewObject);
			this.m_oElement.appendChild(oNewObject);

// 			if (null != this.m_oActive)
// 			{
// 				var divLine = $create("DIV");
// 				var oDimension = new Dimension(oNewObject);
// 				var oActiveDimension = new Dimension(this.m_oActive);

// // 				divLine.style.left = oDimension.get_parentMidpoint().x + "px";
// // 				divLine.style.top = oDimension.get_parentMidpoint().y + "px";
// // 				divLine.style.width = "5px";
// // 				divLine.style.height = "5px";

// 				divLine.style.left = ((oDimension.get_parentMidpoint().x < oActiveDimension.get_parentMidpoint().x) ?  
// 									  oDimension.get_parentMidpoint().x :
// 									  oActiveDimension.get_parentMidpoint().x) + "px";
// 				divLine.style.top = ((oDimension.get_parentMidpoint().y < oActiveDimension.get_parentMidpoint().y) ? 
// 									 oDimension.get_parentMidpoint().y :
// 									 oActiveDimension.get_parentMidpoint().y) + "px";
// 				divLine.style.width = (Math.abs(oDimension.get_parentMidpoint().x - oActiveDimension.get_parentMidpoint().x)) + "px";
// 				divLine.style.height = (Math.abs(oDimension.get_parentMidpoint().y - oActiveDimension.get_parentMidpoint().y)) + "px";
// 				divLine.style.position = "absolute";
				
// 				divLine.style.border = "2px solid black";
// 				this.m_oElement.appendChild(divLine);
// 			}
			
			



			// this.m_oElement.removeChild(this.m_oHoverElement);

		
		
			new Draggable(oNewObject.id);
			this.addDraggable(oTarget.id, new Draggable(oTarget.id, {revert: true, ghosting : true}));
			oNewObject.observe("click", $createDelegate(this, this.setActive));
		}
		else
		{
			oTarget.style.top = this.m_oHoverElement.style.top;
			oTarget.style.left = this.m_oHoverElement.style.left;
		}
		this.m_oHoverElement.style.visibility = "hidden";

	},

	hoverScript : function(oTarget, oElement, oPosition)
	{
		var nObjects = this.m_oObjects.length;
		var oObject = null;
		var oDimension = new Dimension();
		var oTestPoint = new Point();
		var oHoverPoint = new Point();
		var oTargetPoint = null;
		
		

// 		$get("divMessage").innerHTML = "x = " + oTarget.style.left + "<br/>" + "y = " + oTarget.style.top;

		var oTargetDimension = new Dimension(oTarget);
		var oTargetPoint = oTargetDimension.get_offset();

		for (var i = 0;
			 i < this.m_oObjects.length;
			 ++i)
		{
			oDimension.set(this.m_oObjects[i]);
			//this.m_oActive = null;
				
			oTestPoint.x = oDimension.get_offset().x + this.m_oGridSpacing.x;
			oTestPoint.y = oDimension.get_offset().y;
			if (true == this.checkSnap(oTargetPoint, oTestPoint))
			{

				oHoverPoint.x = oDimension.get_parentOffset().x + this.m_oGridSpacing.x;
				oHoverPoint.y = oDimension.get_parentOffset().y;
				if (true == this.hitTest(oHoverPoint))
				{
					oHoverPoint.x = oHoverPoint.y = 0;
				}	
				else
				{
					//this.m_oActive = this.m_oObjects[i];
					break;
				}

			}

			oTestPoint.x = oDimension.get_offset().x - this.m_oGridSpacing.x;
			oTestPoint.y = oDimension.get_offset().y;
			if (true == this.checkSnap(oTargetPoint, oTestPoint))
			{

				oHoverPoint.x = oDimension.get_parentOffset().x - this.m_oGridSpacing.x;
				oHoverPoint.y = oDimension.get_parentOffset().y;
				if (true == this.hitTest(oHoverPoint))
				{
					oHoverPoint.x = oHoverPoint.y = 0;
				}	
				else
				{
					//this.m_oActive = this.m_oObjects[i];
					break;
				}

			}

			oTestPoint.x = oDimension.get_offset().x;
			oTestPoint.y = oDimension.get_offset().y + this.m_oGridSpacing.y;
			if (true == this.checkSnap(oTargetPoint, oTestPoint))
			{
				oHoverPoint.x = oDimension.get_parentOffset().x;
				oHoverPoint.y = oDimension.get_parentOffset().y + this.m_oGridSpacing.y;
				if (true == this.hitTest(oHoverPoint))
				{
					oHoverPoint.x = oHoverPoint.y = 0;
				}
				else
				{
					//this.m_oActive = this.m_oObjects[i];
					break;
				}

			}

			oTestPoint.x = oDimension.get_offset().x;
			oTestPoint.y = oDimension.get_offset().y - this.m_oGridSpacing.y;
			if (true == this.checkSnap(oTargetPoint, oTestPoint))
			{
				oHoverPoint.x = oDimension.get_parentOffset().x;
				oHoverPoint.y = oDimension.get_parentOffset().y - this.m_oGridSpacing.y;
				if (true == this.hitTest(oHoverPoint))
				{
					oHoverPoint.x = oHoverPoint.y = 0;
				}
				else
				{
					//this.m_oActive = this.m_oObjects[i];
					break;
				}

			}
		}

// 		if (null != this.getObjectFromPoint(oTargetDimension.get_parentOffset()))
// 		{
// 			this.m_oActive = this.getObjectFromPoint(oTargetDimension.get_parentOffset());
// 			this.m_oActive.style.border = "2px solid red";
// 		}
		



		if (0 == nObjects &&
			0 == oHoverPoint.x)
		{
			oHoverPoint.x = 5;
			oHoverPoint.y = 5;
		}
			
		if (0 != oHoverPoint.x &&
			0 != oHoverPoint.y)
		{
			this.m_oHoverElement.style.top = oHoverPoint.y + "px";
			this.m_oHoverElement.style.left = oHoverPoint.x + "px";
			this.m_oHoverElement.style.visibility = "visible";
		}
		else
		{
			this.m_oHoverElement.style.visibility = "hidden";
		}

	},

	hover : function (oTarget, oElement, oPosition)
	{
		if (true == oTarget.hasClassName("dragscript"))
		{
			this.hoverScript(oTarget, oElement, oPosition);
		}
		if (true == oTarget.hasClassName("dragoperator"))
		{
			this.hoverOperator(oTarget, oElement, oPosition);
		}

	},

	setActive : function(oEvent)
	{
		var oTemp;
		var oDimension;
		var oActiveDimension;
		var divLine;
		

		if (null != this.m_oActive)
		{
			oDimension = new Dimension(getNode(Event.element(oEvent)));
			oActiveDimension = new Dimension(getNode(this.m_oActive));
			
			divLine = $create("DIV");
			divLine.style.left = ((oDimension.get_parentMidpoint().x < oActiveDimension.get_parentMidpoint().x) ?  
								  oDimension.get_parentMidpoint().x :
								  oActiveDimension.get_parentMidpoint().x) + "px";
			divLine.style.top = ((oDimension.get_parentMidpoint().y < oActiveDimension.get_parentMidpoint().y) ? 
								 oDimension.get_parentMidpoint().y :
								 oActiveDimension.get_parentMidpoint().y) + "px";
			divLine.style.width = (Math.abs(oDimension.get_parentMidpoint().x - oActiveDimension.get_parentMidpoint().x)) + "px";
			divLine.style.height = (Math.abs(oDimension.get_parentMidpoint().y - oActiveDimension.get_parentMidpoint().y)) + "px";
			divLine.style.position = "absolute";			
			divLine.style.border = "2px solid black";
			divLine.style.backgroundColor = "black";
			this.m_oElement.appendChild(divLine);

			this.m_aLines.push(divLine);

			this.m_oActive.style.border = "0px";
		}

		this.m_oActive = getNode(Event.element(oEvent));
		
		this.m_oActive.style.border = "2px solid red";

		function getNode(oElement)
		{
			while (false == Element.hasClassName(oElement, "dragscript"))
			{
				oElement = oElement.parentNode;
			}
			return oElement;
		};
				
	},


	hitTest : function(oTestPoint)
	{
		var oDimension = new Dimension();
		return this.m_oObjects.any(function(oElement) {
				
				oDimension.set(oElement);
				return (oTestPoint.x == oDimension.get_parentOffset().x &&
						oTestPoint.y == oDimension.get_parentOffset().y);
				
			});

	},

	getObjectFromPoint : function(oTestPoint)
	{
		var oDimension = new Dimension();
		var oActiveObject = null;
		
		this.m_oObjects.any(function(oElement) {
				
				oDimension.set(oElement);
				
				if (oDimension.get_parentOffset().x <= oTestPoint.x &&
					oDimension.get_parentOffset().y <= oTestPoint.y &&
					oTestPoint.x <= (oDimension.get_parentOffset().x + oDimension.get_width()) &&
					oTestPoint.y <= (oDimension.get_parentOffset().y + oDimension.get_height()))
				{
					oActiveObject = oElement;
					return true;
				}

			});
		
		return oActiveObject;

	},

	checkSnap : function(oTargetPoint, oTestPoint)
	{
		var bReturn = false;

		if (((oTestPoint.x - this.m_oTolerance.x) <= oTargetPoint.x && oTargetPoint.x <= (oTestPoint.x + this.m_oTolerance.x)) &&
			((oTestPoint.y - this.m_oTolerance.y) <= oTargetPoint.y && oTargetPoint.y <= (oTestPoint.y + this.m_oTolerance.y)))
		{
			bReturn = true;
		}
		return bReturn;
	}

};

function Point(x, y)
{
	this.x = (isNaN(parseInt(x))) ? 0 : parseInt(x);
	this.y = (isNaN(parseInt(y))) ? 0 : parseInt(y);

}

var Line = Class.create(
	{
		aSegments : [],

		initialize : function(oFrom, oTo)
		{
			
		}
	}
);

var Dimension = Class.create(
	{
		initialize : function(oElement)
		{
			var oTemp;

			if (null == oElement)
			{
				return;
			}

			this.set(oElement);

		},

		// properties

		get_midpoint : function()
		{
			return this.m_oMidpoint;
		},

		get_offset : function()
		{
			return this.m_oOffset;
		},

		get_parentOffset : function()
		{
			return this.m_oParentOffset;
		},

		get_parentMidpoint : function()
		{
			return this.m_oParentMidpoint;
		},

		get_width : function()
		{
			return this.m_oDimension.width;
		},

		get_height : function()
		{
			return this.m_oDimension.height;
		},
			
		// methods

		set : function(oElement)	
		{
			this.m_oElement = oElement;
			this.m_oMidpoint = new Point();
			this.m_oParentMidpoint = new Point();
			this.m_oOffset = new Point();
			this.m_oParentOffset = new Point();
			this.m_oDimension = null;

			oTemp = Element.cumulativeOffset(this.m_oElement);
			this.m_oOffset.x = oTemp.left;
			this.m_oOffset.y = oTemp.top;

			oTemp = Element.positionedOffset(this.m_oElement);
			this.m_oParentOffset.x = oTemp.left;
			this.m_oParentOffset.y = oTemp.top;
			
			this.m_oDimension = this.m_oElement.getDimensions();

			this.m_oMidpoint.x = this.m_oOffset.x + (this.m_oDimension.width / 2);
			this.m_oMidpoint.y = this.m_oOffset.y + (this.m_oDimension.height / 2);

			this.m_oParentMidpoint.x = this.m_oParentOffset.x + (this.m_oDimension.width / 2);
			this.m_oParentMidpoint.y = this.m_oParentOffset.y + (this.m_oDimension.height / 2);

		}
			
	}
);




var oLightTable = new LightTable();

oLightTable.addDraggable("divScript1", new Draggable("divScript1", {revert: true, ghosting : true}));
oLightTable.addDraggable("divOperator1", new Draggable("divOperator1", {revert: true,  ghosting: true}));

var oOptions = {};
oOptions.accept = ["dragscript", "dragoperator"];
oOptions.onDrop = $createDelegate(oLightTable, oLightTable.copy);
oOptions.onHover = $createDelegate(oLightTable, oLightTable.hover);
Droppables.add("divLightTable", oOptions);



 
</script> 
</body> 
</html> 
